<template>
	<view>
		<u-navbar title="邀请成员">
			<view slot="right" class="u-m-r-30 cu-btn" :class="{'bg-blue':chosen.length}" @tap="submit">
				确认{{chosen.length?`(${chosen.length})`:''}}
			</view>
		</u-navbar>
		<u-sticky>
			<view class="bg-white u-p-x-30 u-p-y-14 solid-bottom">
				<u-search v-model="key" placeholder="搜索好友名称" :show-action="false"></u-search>
			</view>
		</u-sticky>
		<view class="u-flex u-p-x-30 u-p-y-20 bg-white u-border-bottom"
			v-for="(user,index) in users" 
			:key="index"
			@tap="pickUser(user)">
			<view class="checkbox u-m-r-30" :class="{checked:user.checked}">
			</view>
			<u-avatar :src="user.saveAvatar||user.avatarUrl" mode="square"></u-avatar>
			<text class="u-m-l-20 u-font-34">{{user.remarks||user.userName}}</text>
		</view>
	</view>
</template>

<script>
	import {goback} from "@/utils/util.js"
	import {state,event} from "../bus.js"
	import {fetchCanInviteFdList, fetchGroupMember, inviteGroupMember} from "@/api/addr.js"
	import {mapGetters,mapActions} from "vuex"
	import { ConversationType } from "@/entity/ConversationType.js"
	import chat, { msgTypes } from "@/IM/index.js"
	import DC from "@/DC/index.js"
	export default {
		data() {
			return {
				id:'',
				friend:{ 
					list:[],
					pageNo:1,
					pageSize:20,
					nomore:false,
					loading:false
				},
				chosen:[],
				key:'',
				lock:false,
				modified:false 
			};
		},
		computed:{
			...mapGetters('user',['userInfo']),
			users(){
				return this.friend.list.map((item)=>({...item,checked:this.chosen.some(({id})=>id==item.userId)}))
			},
		},
		watch:{
			key(){
				this.$u.debounce(this.resetFriend,500)
			}
		},
		onLoad({id}) {
			this.id = id
			this.resetFriend()
		},
		onUnload() {
			if(this.modified){
				event.$emit('reset_member')
				event.$emit('reset_groupInfo')
			}
		},
		onReachBottom() {
			this.moreFriend()
		},
		methods:{
			...mapActions('chat',['sendMessage']),
			async resetFriend(){
				this.friend.list = []
				this.friend.pageNo = 1
				this.friend.nomore = false
				await this.moreFriend()
			},
			async moreFriend(){
				if(this.friend.loading){
					throw new Error('正在请求中')
				}
				try{
					this.friend.loading = true
					if(this.friend.nomore){
						return []
					}
					const list = await fetchCanInviteFdList({id:this.id,userName:this.key,pageNo:this.friend.pageNo,pageSize:this.friend.pageSize})
					if(!list||list.length<this.friend.pageSize){
						this.friend.nomore = true
					}else {
						this.friend.pageNo++
					}
					const users = list.map(({userId})=>{
						return DC.userDB.getUser(userId)
					})
					this.friend.list.push(...users)
					return list
				}finally{
					this.friend.loading = false
				}
			},
			pickUser(user){
				if(user.checked){
					this.chosen = this.chosen.filter((item)=>item.id!=user.userId)
				}else{
					this.chosen.push({id:user.userId,name:user.userName})
				}
			},
			async submit(){
				if(this.lock){
					throw new Error('正在请求中')
				}
				if(!this.chosen.length){
					return
				}
				try{
					this.lock = true
					uni.showLoading({
						mask:true,
						title:'loading...'
					})
					await inviteGroupMember({id:this.id,inviteUserId:this.userInfo.userId,userList:this.chosen.map(({id})=>id)})
					this.chosen.forEach(async (item)=>{
						const msg = chat.createMessage({
							chatType:ConversationType.Group,
							groupId:this.id,
							content: `${this.userInfo.userName}邀请${item.name}加入了群聊`,
							msgType: msgTypes.INFORM,
							extras:{
								rich:`<span user="${this.userInfo.userId}">${this.userInfo.userName}</span>邀请<span user="${item.id}">${item.name}</span>加入了群聊`
							}
						})
						await this.sendMessage({
							message: msg,
							id: this.id
						})
						await chat.send(msg)
						uni.$emit('chat_receive',this.id,msg)
					})
					this.modified = true
					goback()
				}finally{
					this.lock = false
					uni.hideLoading()
				}
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.checkbox{
		width: 40rpx;
		height: 40rpx;
		background-color: $u-type-info-light;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		transition: all 0.2s ease-out;
		&::after{
			font-family: "cuIcon";
			content: "\e645";
			color: #FFFFFF;
			opacity: 0;
			transition: all 0.2s ease-out;
		}
		&.checked{
			background-color: $u-type-primary;
			&::after{
				opacity: 1;
			}
		}
	}
</style>
